<template>
<!-- 房屋添加 -->
    <div class="Addahouse">
         <!-- 添加房屋表头 -->
        <div class="AddCommunitytitle">
            <p @click="back">
                <i class="el-icon-arrow-left"></i>
                <span>房屋添加</span>
            </p>
            <p>
                <span class="must">*</span>
                <span>为必填项</span>
            </p>
        </div>
        <!-- 房屋添加输入内容板块 -->
        <div class="Addahousecontent">
            <div class="Addahousecontenttop">
                <div class="contenttopleft">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="社区名称" prop="name">
                        <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                </el-form>
                    <div class="payloader">
                        <p class="title">
                            <span class="starred">*</span>
                            <span class="text">楼宇：</span>
                        </p>
                        <el-select v-model="Building" placeholder="请选择楼宇" class="storeid">
                            <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.label" >
                            </el-option>
                        </el-select>
                    </div>
                    <div class="payloader">
                        <p class="title">
                            <span class="starred">*</span>
                            <span class="text"> 房间号：</span>
                        </p>
                        <el-input
                        placeholder="请选择社区"
                        v-model="RoomNo"
                        clearable class="countent">
                        </el-input>
                    </div>
                    <div class="payloader">
                        <p class="title">
                            <span class="starred">*</span>
                            <span class="text"> 建筑面积：</span>
                        </p>
                        <el-input
                        placeholder="请选择社区"
                        v-model="builtuparea"
                        clearable class="countent">
                        </el-input>
                    </div>
                    <div class="payloader">
                        <p class="title">
                            <span class="starred"></span>
                            <span class="text"> 公摊面积：</span>
                        </p>
                        <el-input
                        placeholder="请选择社区"
                        v-model="Sharedarea"
                        clearable class="countent">
                        </el-input>
                    </div>
                    <div class="payloader">
                        <p class="title">
                            <span class="starred">*</span>
                            <span class="text"> 房屋状态：</span>
                        </p>
                        <el-input
                        placeholder="请选择社区"
                        v-model="Housingstatus"
                        clearable class="countent">
                        </el-input>
                    </div>
                </div>
                <div class="contenttopleft">
                    <div class="payloader">
                        <p class="title">
                            <span class="starred">*</span>
                            <span class="text">单元：</span>
                        </p>
                        <el-input
                        placeholder="请选择单元"
                        v-model="unit"
                        clearable class="countent">
                        </el-input>
                    </div>
                    <div class="payloader">
                        <p class="title">
                            <span class="starred">*</span>
                            <span class="text">房屋类型：</span>
                        </p>
                        <el-select v-model="housetype" placeholder="请选择房屋类型" class="storeid">
                            <el-option
                            v-for="item in options1"
                            :key="item.value"
                            :label="item.label"
                            :value="item.label" >
                            </el-option>
                        </el-select>
                    </div>
                    <div class="payloader">
                        <p class="title">
                            <span class="starred">*</span>
                            <span class="text"> 使用面积：</span>
                        </p>
                        <el-input
                        placeholder="请选择社区"
                        v-model="usablearea"
                        clearable class="countent">
                        </el-input>
                    </div>
                    <div class="payloader">
                        <p class="title">
                            <span class="starred"></span>
                            <span class="text"> 房屋户型：</span>
                        </p>
                        <div class="housetype">
                            <el-input
                            placeholder=""
                            v-model="room"
                            clearable class="housetext">
                            </el-input>
                            <span>室</span>
                            <el-input
                            placeholder=""
                            v-model="office"
                            clearable class="housetext">
                            </el-input>
                            <span>厅</span>
                            <el-input
                            placeholder=""
                            v-model="wash"
                            clearable class="housetext">
                            </el-input>
                            <span>卫</span>
                        </div>
                       
                    </div>
                    <div class="payloader">
                        <p class="title">
                            <span class="starred"></span>
                            <span class="text"> 储藏室号：</span>
                        </p>
                        <el-input
                        placeholder="请选择社区"
                        v-model="StorageRoom"
                        clearable class="countent">
                        </el-input>
                    </div>
                    <div class="payloader">
                        <p class="title">
                            <span class="starred"></span>
                            <span class="text"> 车位号：</span>
                        </p>
                        <el-input
                        placeholder="请选择社区"
                        v-model="parkinglot"
                        clearable class="countent">
                        </el-input>
                    </div>
                </div>
            </div>
            <!-- 备注信息模块 -->
            <div class="Addahousecontentbottom">
                <div class="notesinformation">
                    <p class="title">
                        <span class="starred"></span>
                        <span class="text">备注信息：</span>
                    </p>
                    <el-input
                        type="textarea"
                        placeholder="请输入备注信息"
                        v-model="textarea"
                        maxlength="300"
                        show-word-limit
                        class="textarea">
                    </el-input>
                </div>
            </div>
        </div>
        <!-- 添加房屋保存按钮 -->
        <div class="contentfooter">
            <el-button type="primary" class="savebutton" @click="save"><i class="el-icon-document-checked"></i>保存</el-button>
            <el-button plain class="reseatebutton" @click="reseate"><i class="el-icon-refresh-left"></i>重置</el-button>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            value:'',//下拉选项框
            input:'',//输入框
            Building:'',    //楼宇
            RoomNo:'',      //房间号
            builtuparea:'', //建筑面积
            Sharedarea:'',  //公摊面积
            Housingstatus:'',    //房屋状态
            unit:'',        //单元
            housetype:'',   //房屋类型
            usablearea:'',  //使用面积
            room:''     ,   //室
            office:'',      //厅
            wash:'',        //卫
            StorageRoom:'', //储藏室
            parkinglot:'',  //车位
            textarea:'',//备注信息多行文本输入框
            options: [{
            value: '选项1',
            label: '1号楼'
            }, {
            value: '选项2',
            label: '2号楼'
            }, {
            value: '选项3',
            label: '3号楼'
            }, {
            value: '选项4',
            label: '4号楼'
            }, {
            value: '选项5',
            label: '5号楼'
            }],//下拉选项框选项
            options1: [{
            value: '选项1',
            label: '住宅楼'
            }, {
            value: '选项2',
            label: '商铺'
            }, {
            value: '选项3',
            label: '物业'
            }, ],//下拉选项框选项
            ruleForm: {
                name: '',   //所属社区
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            rules: {
                name: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                region: [
                    { required: true, message: '请选择活动区域', trigger: 'change' }
                ],
                date1: [
                    { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                ],
                date2: [
                    { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
                ],
                type: [
                    { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
                ],
                resource: [
                    { required: true, message: '请选择活动资源', trigger: 'change' }
                ],
                desc: [
                    { required: true, message: '请填写活动形式', trigger: 'blur' }
                ]
            }
        }
    },
    methods:{
        // 添加房屋底部保存 重置按钮
        save(){

            console.log("保存")
            if(this.ruleForm.name=='' || this.Building=='' || this.builtuparea=='' || this.unit=='' || this.RoomNo=='' || this.usablearea=='' || this.housetype=='' || this.Housingstatus==''){
                this.$alert('*为必填项，输入内容不能为空', '', {
                    confirmButtonText: '确定',
                });
            }else{
                if(this.$route.query.data){
                    fetch(`http://127.0.0.1/houseingchange?Belongingcommunity=${this.ruleForm.name}&Buildingname=${this.Building}&Numberofunits=${this.unit}&RoomNo=${this.RoomNo}&buildingarea=${this.builtuparea}&usablearea=${this.usablearea}&Housetype=${this.housetype}&Housingstatus=${this.Housingstatus}&room=${this.room}&office=${this.office}&wash=${this.wash}&Sharedarea=${this.Sharedarea}&StorageRoom=${this.StorageRoom}&parkinglot=${this.parkinglot}&textarea=${this.textarea}&date=${this.$route.query.data.date}`,{
                        method: 'POST', // 指定请求方法
                        headers: {
                            'Content-Type': 'application/json', // 设置请求的Content-Type
                        },
                        body: JSON.stringify({ key: 'value' }), // 将数据转换为JSON字符串作为请求体
                    }).then(res=>res.json()).then(res1=>{
                        console.log(res1)
                        this.$message({
                            message: '数据修改成功',
                            type: 'success'
                        });
                        this.$router.go(-1)  //页面数据返回上一级
                    }).catch(err=>{
                        console.log(err)
                    })
                }else{
                    fetch(`http://127.0.0.1/houseingadd?Belongingcommunity=${this.ruleForm.name}&Buildingname=${this.Building}&Numberofunits=${this.unit}&RoomNo=${this.RoomNo}&buildingarea=${this.builtuparea}&usablearea=${this.usablearea}&Housetype=${this.housetype}&Housingstatus=${this.Housingstatus}&room=${this.room}&office=${this.office}&wash=${this.wash}&Sharedarea=${this.Sharedarea}&StorageRoom=${this.StorageRoom}&parkinglot=${this.parkinglot}&textarea=${this.textarea}`,{
                        method: 'POST', // 指定请求方法
                        headers: {
                            'Content-Type': 'application/json', // 设置请求的Content-Type
                        },
                        body: JSON.stringify({ key: 'value' }), // 将数据转换为JSON字符串作为请求体
                    }).then(res=>res.json()).then(res1=>{
                        console.log(res1)
                        this.$message({
                            message: '数据添加成功',
                            type: 'success'
                        });
                        this.$router.go(-1)  //页面数据返回上一级
                    }).catch(err=>{
                        console.log(err)
                    })
                }
            }
            
        },
        reseate(){
            console.log("重置")
        },
        back(){
            this.$router.go(-1)
        }
    },
    mounted(){
        // fetch("http://127.0.0.1/user/all").then(res=>res.json()).then(res1=>{
        //     console.log(res1)
        // }).catch(err=>{
        //     console.log(err)
        // })
        if(this.$route.query.data){
            console.log(this.$route.query.data,11111111111)
            this.ruleForm.name=this.$route.query.data.Belongingcommunity
            this.Building=this.$route.query.data.Buildingname
            this.RoomNo=this.$route.query.data.RoomNo
            this.builtuparea=this.$route.query.data.buildingarea
            this.Sharedarea=this.$route.query.data.Sharedarea
            this.unit=this.$route.query.data.Numberofunits
            this.housetype=this.$route.query.data.Housetype
            this.usablearea=this.$route.query.data.usablearea
            this.room=this.$route.query.data.room
            this.office=this.$route.query.data.office
            this.wash=this.$route.query.data.wash
            this.StorageRoom=this.$route.query.data.StorageRoom
            this.parkinglot=this.$route.query.data.parkinglot
            this.textarea=this.$route.query.data.textarea
            this.Housingstatus=this.$route.query.data.Housingstatus
        }
    }
}
</script>

<style lang="scss" scoped>
    .Addahouse{
        width: 1260px;  /* 最大1265px */ 
        margin: auto;
        height: 80vh;
        overflow: scroll;
        scrollbar-width: none;
        background-color: #fff;
        border: 1px solid rgba(233, 233, 233, 1);
        // 添加房屋标题
        .AddCommunitytitle{
            height: 60px;
            padding: 0 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid rgba(242, 242, 242, 1);
            & p:nth-child(1){
                color: #666666;
                font-size: 16px;
                font-family: 'Font Awesome 5 Pro Solid', 'Font Awesome 5 Pro';
                font-weight: 900;
                font-style: normal;
                height: 28px;
                line-height: 28px;
                cursor: pointer;
                .el-icon-arrow-left{
                    font-size: 16px !important;
                    color: #666666;
                    font-weight: 900 !important;
                }
            }
            & p:nth-child(2){
                color: #999;
                font-size: 12px;
                .must{
                    color: #FF3B30;
                    margin-right: 5px;
                }
            }
        }
        // 添加房屋输入框内容板块
        .Addahousecontent{
            width: 100%;
            padding: 0 60px 40px 40px;
            box-sizing: border-box;
            background-color: #fff;
            border-bottom: 1px solid rgba(242, 242, 242, 1);
            .Addahousecontenttop{
                width: 100%;
                display: flex;
                justify-content: space-between;
                .contenttopleft{
                     width: 520px;
                    margin-top: 30px;
                    ::v-deep .el-form-item__content{
                        margin-left: 120px !important;

                    }
                    .payloader{
                        width: 100%;
                        height: 40px;
                        margin-bottom: 25px;
                        display: flex;
                        align-items: center;

                        .title{
                            width: 120px;
                            padding-right: 20px;
                            font-size: 14px;
                            color: #666666;
                            box-sizing: border-box;
                            text-align: right;
                            .starred{
                                color: #FF3B30;
                            }
                        }
                        .note{
                            font-size: 14px;
                            color: #666666;
                        }
                        .countent{
                            width: 400px;
                            ::v-deep .el-input__inner:focus {
                                border-color: #C0C4CC !important;
                                outline: 0;
                            }
                        }
                        .housetype{
                            width: 400px;
                            display: flex;
                            align-items: center;
                            span{
                                font-size: 14px;
                                margin: 0 15px;
                                color: #666666;
                            }
                            .housetext{
                                width: 77px;
                            }
                            ::v-deep .el-input__inner:focus {
                                border-color: #C0C4CC !important;
                                outline: 0;
                            }
                        }
                        .datapicker{
                            width: 400px;
                            ::v-deep .el-input__inner:focus {
                                border-color: #C0C4CC !important;
                                outline: 0;
                            }
                        }
                        .storeid,.building{
                            width: 400px;
                                ::v-deep .el-input__inner {
                                    border-color: #C0C4CC !important;
                                }
                        }
                    }
                }
            }
            .Addahousecontentbottom{
                width: 100%;
                background-color: #fff;
                 // 备注信息
                .notesinformation{
                    display: flex;
                    .title{
                        width: 120px;
                        padding-right: 20px;
                        font-size: 14px;
                        color: #666666;
                        box-sizing: border-box;
                        text-align: right;
                        white-space: nowrap;
                        .starred{
                            color: #FF3B30;
                        }
                    }
                    .textarea{
                        width: 1020px;
                        height: 175px;
                        ::v-deep .el-textarea__inner{
                            width: 1020px;
                            height: 175px;
                        }
                        ::v-deep .el-textarea__inner {
                            border-color: #C0C4CC !important;
                            resize: none;
                        }
                    }
                }
            }
            
        }
        //添加房屋底部按钮
        .contentfooter{
            width: 100%;
            box-sizing: border-box;
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            .savebutton,.reseatebutton{
                width: 140px;
                height: 40px;
                i{
                    margin-right: 5px;
                }
            }
            .savebutton{
                margin-right: 40px;
            }
            .createbutton{
                width: 160px;
                height: 40px;
                i{
                    margin-right: 5px;
                }
            }
            .el-button--primary{
                background-color: rgba(0, 121, 254, 1);
            }
            .el-button--primary:hover {
                background: #3394fe !important;
                border-color: #3394fe !important;
                color: #FFF !important;
            }
            .el-button.is-plain{
                border-color: rgba(0, 121, 254, 1);
                color: rgba(0, 121, 254, 1);
            }
            .el-button.is-plain:hover {
                background: #FFF !important;
                border-color: #409EFF;
                color: #409EFF !important;
            }
        }
    }
</style>